<!-- 女性健康 -->
<template>
    <div class="womenhealthhistory-container">

        <!-- 女性健康包裹层 -->
        <div class="womenhealthhistory-content-main">
            <!-- 月经史 -->
            <div class="menstruation-history  category-container" >
                <div class="category-title">
                    <span class="title-text">月经史</span>
                </div>
                <van-cell-group class="category-content">
                    <van-row class="item-nowarp">
                      <van-col span="12">
                        <!-- 初潮 -->
                        <van-field v-model="menstruationData.vdp09" input-align="center" type="digit" label="初潮" placeholder="初潮年龄" >
                            <template #extra>
                              <span>岁</span>
                            </template>
                        </van-field>
                      </van-col>
                    </van-row>
                    <van-row class="item-nowarp">
                      <van-col span="12">
                        <!-- 经期 -->
                        <van-field v-model="menstruationData.vdp10" input-align="center" type="digit" label="经期" placeholder="经期天数" >
                            <template #extra>
                              <span>天</span>
                            </template>
                        </van-field>
                      </van-col>
                        <van-col span="12">
                        <!-- 周期 -->
                        <van-field v-model="menstruationData.vdp11" input-align="center" type="digit" label="周期" placeholder="周期天数" >
                            <template #extra>
                              <span>天</span>
                            </template>
                        </van-field>
                       </van-col>
                    </van-row>
                    <van-row class="item-nowarp">
                        <van-col span="12">
                        <!-- 痛经 -->
                        <van-field readonly is-link v-model="menstruationData.vdp36" label="痛经" placeholder="请选择痛经情况" @click="menstruationData.itemcontrol.isDysmenorrheaSelectShow = true" />
                        <!-- 月经量 -->
                        <van-field readonly is-link v-model="smokeData.vdp31Text" label="吸烟史" placeholder="请选择吸烟史" @click="smokeData.itemcontrol.isSmokeSelectShow = true" />
                      </van-col>

                    </van-row>
                </van-cell-group>

                <Teleport to="body">
                    <!-- 痛经 -->
                    <van-popup round v-model:show="menstruationData.itemcontrol.isDysmenorrheaSelectShow"  position="bottom" :style="{ height: '45%' }">
                        <van-picker
                          v-model="menstruationData.itemcontrol.dysmenorrheaSelectCode" 
                          :columns="DysmenorrheaData"
                          :columns-field-names="{ text: 'name', value: 'code' }"
                          @cancel="menstruationData.itemcontrol.isDysmenorrheaSelectShow= false"
                          @confirm="confirmDysmenorrheaSelectFn($event)"
                          title="吸烟史"
                        />
                    </van-popup>
                </Teleport>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { onMounted } from 'vue';
import { DysmenorrheaData } from '@/assets/data/fixedData.js';

    // 元素挂载后执行
    onMounted(() => {
        
    });

    // 单条放射职业史数据
    const menstruationData = reactive({
                vdp09: '', //初潮
                vdp10: '', //经期
                vdp11: '', //周期
                vdp36: '', //痛经
                vdp33: '', //月经量
                vdp35: '', //含血块否
                vdp34: '', //月经颜色
                vdp13: '', //是否在停经期
                vdp12: '', //停经年龄
                vdp38: '', //末次月经时间
                vdp37: '', //伴随症状
                itemcontrol: {
                    isDysmenorrheaSelectShow: false,
                    dysmenorrheaSelectCode: [],
                    // weddingMaxDate: new Date(),
                },
    });

    // 痛经下拉确认
    const confirmDysmenorrheaSelectFn = ($event) => {
        debugger;
        menstruationData.itemcontrol.dysmenorrheaSelectCode = $event.selectedValues;
        menstruationData.vdp36 = $event.selectedOptions[0]['name'];
        menstruationData.itemcontrol.isDysmenorrheaSelectShow = false;
    };

</script>

<style scoped>

    .womenhealthhistory-container {

        margin: 20px 18px 100px;
        
        .womenhealthhistory-content-main {

            margin: 20px 10px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: -2px 8px 18px #ddd;


            .category-container {
               .category-title {
                   background-color: #e1f2f9;
                   display: flex;
                   align-items: center;
                   padding: 5px 20px;
                   justify-content: space-between;
               
                   .title-text {
                    font-size: 28px;
                    color:rgb(62, 175, 224);
                    font-weight: 700;
                   }
               }
               
                .category-content {
                   .item-nowarp :deep(.van-field__label) {
                      width: unset;
                   } 
                }
               
               }

        }
        
    }

</style>